<!--
  To change this template, choose Tools | Templates
  and open the template in the editor.
-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <title>Template Designer</title>
    <link type="text/css" rel="stylesheet" href="../css/templateDesign.css" />
    <link type="text/css" rel="stylesheet" href="../css/layout-default-latest.css" />
    <link rel="stylesheet" type="text/css" href="../css/complex.css" />	
    <link rel="stylesheet" type="text/css" href="../css/ui/lightness/jquery-ui-1.8.13.custom.css" />
    <link rel="stylesheet" type="text/css" href="../css/scroll.css" />	

    <g:javascript library="jquery" plugin="jquery"/>

    <script type="text/javascript" src="../js/templatedesing/jquery.uniqueId.js"></script>

    <script type="text/javascript" src="../js/layout/jquery.ui.all.js"></script>
    <script type="text/javascript" src="../js/layout/jquery.layout.min.js"></script>

    <script type="text/javascript" src="../js/templatedesing/JSUtils.js"></script>
    <script type="text/javascript" src="../js/templatedesing/JSScroll.js"></script>
    <script type="text/javascript" src="../js/templatedesing/JSLayout.js"></script>
    <script type="text/javascript" src="../js/templatedesing/JSTemplate.js"></script>
    <script type="text/javascript" src="../js/templatedesing/JSDatosEdicion.js"></script>

    <script src="../js/jstree/_lib/jquery.cookie.js"></script>  
    <script src="../js/jstree/_lib/jquery.hotkeys.js"></script>
    <script src="../js/jstree/jquery.jstree.js"></script>
    <script src="../js/templatedesing/json-serialization.js"></script>
    <script src="../js/templatedesing/jquery.archetypetree.js"></script>
    <script src="../js/templatedesing/JSEstructuraZona.js"></script>
    <script src="../js/templatedesing/JSEstructuraTemplate.js"></script>    

    <script type="text/javascript"> 
            var outerLayout, middleLayout, innerLayout; 
            var nodesTemplate; //representa los nodos en el template
            
            
            function loadEstructuraTemplate(){
              nodesTemplate.zones = {} ;
              $(".archetypeZone").each(function(){
                  var idArchetypeZone = $(this).attr("id"); //Es el id de la zona contenedora, la mas externa
                  var zone = new JSEstructuraZona();                  
                  $(this).children("div").each(function(){
                      var _this = $(this); //es un arbol en un div                                                                  
                      var checked = _this.archetypeTreeChecked();
                      if(_this.data('isArchetype')){
                        zone.archetype = _this.data('nombreArchivo'); 
                        zone.archetypeVersion = _this.data('version'); 
                        $(checked).each(function(){                             
                            zone.nodesArchetype.push(this);
                        });
                      } else {                        
                        $(checked).each(function(){                              
                            zone.nodes.push(this);
                        });                          
                      }
                                            
                      nodesTemplate.zones[idArchetypeZone] = zone;                      
                  });
              });                           
              
              //alert(JSON.stringify(nodesTemplate));
            }
            
            function myonlick(data){
                var node_id = data.rslt.obj.attr("id");
                //var checked_ids = $("#archetypeRoot").archetypeTreeChecked();
                //alert(checked_ids);
                if(data.rslt.obj.data('isArchetype')){
                  alert("isArchetype: " + data.rslt.obj.data('isArchetype') + " id : " + node_id + " tipo: " + data.rslt.obj.data('tipo') + " path: " + data.rslt.obj.data('path') + " nombreArchivo: " + data.rslt.obj.data('nombreArchivo') + " version: " + data.rslt.obj.data('version')); 
                } else {
                  alert("isArchetype: " + data.rslt.obj.data('isArchetype') + " id : " + node_id + " tipo: " + data.rslt.obj.data('tipo') + " path: " + data.rslt.obj.data('path'));
                }
            }
            
            //Codigo que borra el Nodo o Arquetipo que esta en el Template
            function deleteNode(data){
                var node;
                if(data.o == undefined){
                  node = data;
                } else {
                  node = data.o;
                }
                                
                var idOrigen = node.parent().parent().data('idOrigen');                
                $("#archetypeRoot").find("#"+idOrigen).show();         
                node.parent().parent().remove();
            }
                            
            function addToZone(data){             
               //var id = "#"+data.r.context.id;
               if(data.r.context.id != ""){
                   if(data.o.data('isArchetype')){
                     var a = $("<div></div>")
                             .uniqueId()
                             .archetypeTree({    
                                controller:"home",
                                action:"list",
                                params:{nombreArchivo:data.o.data("nombreArchivo"),version:data.o.data("version"),path:data.o.data("path")},             
                                onclick:myonlick,
                                checkbox:true,
                                erasable:true,
                                functionEraseable:deleteNode,
                                dnd:"#trash",
                                functionDropCheck:function(data) {                                                     
                                  return(data.o[0].parentNode.parentNode.localName == "div");
                                },
                                functionDND:deleteNode,
                                types:1
                             });
                             data.o.hide();
                             a.data('isArchetype',true);
                             a.data('idOrigen',data.o[0].id);
                             a.data("nombreArchivo",data.o.data("nombreArchivo"));
                             a.data("version",data.o.data("version"));
                             a.appendTo(data.r);                                                
                   } else {                   
                      var n = $("<div></div>")
                              .uniqueId()                                                            
                              .archetypeTree({ 
                                data : data.o.clone(true),
                                onclick:myonlick,
                                checkbox:true,
                                erasable:true,
                                functionEraseable:deleteNode,
                                dataSource:"html_data",
                                dnd:"#trash",
                                functionDND:deleteNode,
                                types:1     
                              });
                              data.o.hide();
                              n.data('isArchetype',false);
                              n.data('idOrigen',data.o[0].id);
                              n.appendTo(data.r);                              
                   }                                      
               }
            }
            
            
            function jerarquiaArchetype(data){
              $("#archetypeRoot").archetypeTree({    
                  controller:"home",
                  action:"list",
                  params:{nombreArchivo:data.o.data("nombreArchivo"),version:data.o.data("version"),path:data.o.data("path")},
                  dnd:".archetypeZone",
                  functionDND:addToZone,
                  functionDropCheck:function(data) {
                      var check = true;
                      if(data.o.data('isArchetype')){
                          data.r.children("div").each(function(){
                              var _this = $(this); //es un arbol en un div
                              if(_this.data("isArchetype")){
                                check = false;
                              }
                          });
                      } 
                      
                      if(check){
                        check = data.o.hasClass("jstree-leaf");
                      } 
                      
                      return check;
                  },
                  onclick:myonlick,                  
                  types:1
              });   
              
              //vacio las zonas del template
              nodesTemplate.zones = {};
              nodesTemplate.archetypeRoot = data.o.data('nombreArchivo');
              nodesTemplate.archetypeRootVersion = data.o.data("version");
              $(".archetypeZone").html("");
            }
            
            $(document).ready(function () { 	
                var jsLayout = new JSLayout();
                jsLayout.iniControles();

                var jsTemplate = new JSTemplate();
                jsTemplate.iniControles();
                
                nodesTemplate = new JSEstructuraTemplate();
                                
                $("#archetypes").archetypeTree({    
                  controller:"home",
                  action:"list",                  
                  dnd:"#archetypeRoot",
                  functionDND:jerarquiaArchetype
                });                                
            });                                           
    </script> 

  </head> 

  <body> 

    <div class="outer-north">
      <div class="header">Diseñador de Templates OpenEHR-Gen</div>
      <div class="content">
			<!-- Este es el header -->
      </div>
      <ul class="toolbar">
        <li id="tbarNuevo" class="first"><span></span>Nuevo</li>
        <li id="tbarAbrir"><span></span>Abrir</li>
        <li id="tbarGuardar"><span></span>Guardar</li>
        <li id="tbarConsolidar"><span></span>Consolidar</li>
        <li id="tbarOtraOpcion" class="last"><span></span>Otra Opción</li>
      </ul>
    </div>

    <div class="outer-west">
      <div class="header">Arquetipos</div>
      <div class="content" id="archetypes" style="overflow: hidden;"></div>     
    </div>	

    <div  class="outer-center">
      <div class="middle-center">
        <div class="header">Template<label id="lblNombreTemplate"></label></div>
        <div class="content" style="height: 90%"></div>
      </div> 
      <div class="middle-west">
        <div class="header">Arquetipo Raiz</div>
        <div class="content" id="archetypeRoot" style="height: 400px;overflow: hidden;"></div>        
      </div>
    </div> 

    <div class="outer-east">
      <div class="header">Propiedades</div>
      <div class="subhead">Subtitulo</div>
      <div class="content">
        <div id="trash" style="text-align:center;">
          <img src="${resource(dir:'images',file:'trash.png')}" alt="Trash" border="0" />
          <br/>
          <!-- <input id="boton" value="Cargar Estructura" type="button" onclick="loadEstructuraTemplate();"/> -->
        </div>
      </div>
    </div>

    <div class="outer-south">
      <div class="header">Pie</div>
      <div class="content">
        <!-- Este es el pie -->
      </div>
    </div>

    <!-- ................................................................... -->
    <!-- ................................................................... -->

    <div id="dialog-nuevo" title="Crear Template">
      <form id="formNuevoTemplate">
        <fieldset>
          <div>
            <label for="txtIdTemplateCrear">Identificador</label>
          </div>
          <div>
            <input type="text" id="txtIdTemplateCrear" class="text ui-widget-content ui-corner-all" />
          </div>
          <div>
            <label for="nombre">Nombre</label>
          </div>
          <div>
            <input type="text" id="txtNombreTemplateCrear" class="text ui-widget-content ui-corner-all" />
          </div>

          <div>
            <label for="selectNombreLayoutTemplateCrear">Layout</label>
          </div>

          <div style="width: 315px" class="scroll-pane ui-widget ui-widget-header ui-corner-all">
            <ol id="selectable" class="scroll-content">
              <g:each in="${layouts}" var="layout">
                <li class="ui-state-default"><div class="IdLayout" id="${layout.path + "_" + layout.nombreArchivo + "_" + layout.numVersion}" style="display:none" ></div>${layout.layoutTable}</li>
              </g:each>  
            </ol>
            <div class="scroll-bar-wrap ui-widget-content ui-corner-bottom">
              <div class="scroll-bar"></div>
            </div>
          </div>


          <div>
            <img id="gifLoadCrearTemplate" alt="Creando..." src="/img/ajax-loader.gif" style="display: none">
          </div>
        </fieldset>
      </form>
    </div>

    <!-- ................................................................... -->

    <div id="dialog-abrir" title="Abrir Template">
      <div>
        <div id="accordion-abrir" style="height: 375px">
          <h3><a href="#">Locales</a></h3>
          <div>
            <div>
              <ol id="selectableTemplatesLocales" style="height: 320px">

              </ol>
            </div>
          </div>
          <h3><a href="#">Remotos</a></h3>
          <div style="height: 375px">
            <p>
              Arbol de templates Remotos
            </p>
          </div>
        </div>
      </div>
    </div>

    <!-- ................................................................... -->

    <div id="dialog-guardar" title="Guardar Template">
      <fieldset>
        <div>
          <label for="txtVersionTemplateGuardar">Version</label>
        </div>
        <div>
          <input type="text" id="txtVersionTemplateGuardar" class="text ui-widget-content ui-corner-all" />
        </div>
      </fieldset>
      <div>
        <img id="gifLoadGuardarTemplate" alt="Guardando..." src="/img/ajax-loader.gif" style="display: none">
      </div>
    </div>

    <!-- ................................................................... -->

    <div id="dialog-consolidar" title="Consolidar Template">
      <div>
        Elija la ruta en el Repositorio en donde quiere que se guarde el Template. 
      </div>  
      <fieldset>
        <div>
          <label for="txtPathTemplateConsolidar">Ruta</label>
        </div>
        <div>
          <input type="text" id="txtPathTemplateConsolidar" class="text ui-widget-content ui-corner-all" />
        </div>
      </fieldset>
      <div>
        <img id="gifLoadConsolidarTemplate" alt="Consolidando..." src="/img/ajax-loader.gif" style="display: none">
      </div>
    </div>

    <!-- ................................................................... -->

    <div id="dialog-desea-guardar">
      Actualmente esta editando un Template. 
      Desea guardar cambios realizados en edición actual?
    </div>

    <!-- ................................................................... -->
  </body> 
</html> 